<template>
  <div class="seven">
    <div class="seven-one">
      <div class="seven-two">文章标题</div>
      <el-input
        v-model="arr.searchTitle"
        placeholder="请输入内容"
        class="custom-input"
      ></el-input>
      <div class="seven-two">发布时间</div>
      <div class="block">
        <el-date-picker
          v-model="startDate1"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          class="custom-date-picker"
          value-format="yyyy-MM-dd hh:mm:ss"
        >
        </el-date-picker>
      </div>

      <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
      <el-button @click="resetForm">重置</el-button>
    </div>

    <div class="seven-three">
       
      
      <el-button type="primary" icon="el-icon-edit" class="seven-three-button" @click="open"
        >写文章</el-button
      >
      <el-table :data="tableData.records" style="width: 100%">
        <el-table-column label="标题" width="300" class="seven-three-el">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预览图" width="120">
          <template slot-scope="scope">
            <!-- 替换el-tag为img标签，通过src绑定图片路径 -->
            <img
              :src="scope.row.titleImage"
              alt="预览图"
              style="width: 50px; height: auto; max-height: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column label="发布时间" width="250" class="seven-three-el">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete1(scope.$index, scope.row)"
              >查询</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="bloc">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="arr.current"
          :page-sizes="sizes"
          :page-size="arr.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total"
        >
        </el-pagination>
      </div>
    </div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" v-if="showArticleForm">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
// import {VueEditor} from "vue2-editor";
export default {
  // components:{
  //   VueEditor
  // },
  data() {
    return {
      showArticleForm: false,
      id:"",
      sizes: [10, 20, 30, 40, 50],
      total: 0,
      tableData: [],
      input: "",
      startDate1: [],
      arr: {
        current: 1,
        size: 10,
        searchTitle: "",
        startDate:"" ,
        endDate:"" ,
      },
      arr1: {
        current: 1,
        size: 10,
        searchTitle: "",
        startDate:"" ,
        endDate:"" ,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
     open() {
       
      
      },
    handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete1(index, row){
         console.log(index, row);
         this.$router.push(`/detail?id=${row.id}`);
      },
      
      handleDelete(index, row){
       
           this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          
          console.log("删除");
          console.log(row.id);
          this.id = row.id;

          this.$axios
            .post(`/api/api/admin/article/delete`,{
              articleId:this.id
            })
            .then((res) => {
              console.log(res);
                this.getList(); 
            })
            .catch((err) => {
              console.log(err);
            });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      },
    
    submitForm() {
      
          this.arr.startDate = this.startDate1[0];
          this.arr.endDate = this.startDate1[1];
          this.getList();
       
    },
    resetForm (){
      this.arr=structuredClone(this.arr1)
      this.startDate1=null
    },
    getList() {
      this.$axios
        .post(`/api/api/admin/article/list`, this.arr)
        .then((res) => {
          this.tableData = res.data.data;
          console.log(this.tableData, "1111");
          console.log(res);
          this.total = res.data.data.total;
          console.log(this.arr.current, "yema ");
        
          
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.arr.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.arr.current = val;
      this.getList();
    },
  },
};
</script>

<style scoped>
.seven-one {
  width: 100%;
  height: 65px;
  background-color: white;
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
  border-radius: 5px;
}
::v-deep .custom-input {
  width: 200px;
}
.seven-two {
  margin-left: 50px;
  margin-right: 20px;
}
::v-deep .custom-date-picker {
  margin-right: 50px;
}
.seven-three {
  width: 100%;
  background-color: white;
  margin-top: 20px;
  border-radius: 5px;
}
.seven-three-button {
  margin: 20px;
}
.seven-three-el {
  margin: 20px;
}
.bloc {
  text-align: center;
  margin-top: 20px;
  height: 35px;
}
</style>